<template>
	<view class="container">
		<z-paging ref="paging" v-model="list" @query="queryList">
			<view slot="top" class="content-wrapper" style="background-color: #ffffff;">
				<view class="search-box">
					<u-search placeholder="请输入关键字搜索" v-model="formData.kw" :show-action="false" :clearabled="true"
						:animation="false" shape="round" bgColor="#F5F6FA" height="72rpx" searchIconColor="#999999"
						placeholderColor="#999999" @change="$u.debounce(refreshList, 500)" :inputStyle="{
							color: '#333333',
							backgroundColor: '#F5F6FA',
						}"></u-search>
				</view>
				<view class="sort-box">
					<view class="sort-item" @click="handleSort('room_name')">
						<text>房号</text>
						<image src="/pages-landlord/static/room/sort-no.png" v-if="sortConfig.sort!='room_name'">
						</image>
						<image src="/pages-landlord/static/room/sort-up.png"
							v-else-if="sortConfig.sort=='room_name' && sortConfig.way=='asc'"></image>
						<image src="/pages-landlord/static/room/sort-down.png"
							v-else-if="sortConfig.sort=='room_name' && sortConfig.way=='desc'"></image>
					</view>
					<view class="sort-item" @click="handleSort('day')">
						<text>账期</text>
						<image src="/pages-landlord/static/room/sort-no.png" v-if="sortConfig.sort!='day'">
						</image>
						<image src="/pages-landlord/static/room/sort-up.png"
							v-else-if="sortConfig.sort=='day' && sortConfig.way=='asc'"></image>
						<image src="/pages-landlord/static/room/sort-down.png"
							v-else-if="sortConfig.sort=='day' && sortConfig.way=='desc'"></image>
					</view>
					<view class="sort-item" @click="handleSort('money')">
						<text>金额</text>
						<image src="/pages-landlord/static/room/sort-no.png" v-if="sortConfig.sort!='money'">
						</image>
						<image src="/pages-landlord/static/room/sort-up.png"
							v-else-if="sortConfig.sort=='money' && sortConfig.way=='asc'"></image>
						<image src="/pages-landlord/static/room/sort-down.png"
							v-else-if="sortConfig.sort=='money' && sortConfig.way=='desc'"></image>
					</view>
				</view>
				<view class="title-bar">
					<view class="left">
						共{{total}}项
					</view>
					<view class="right font-color-red">
						{{total_sum_money}}元
					</view>
				</view>
			</view>

			<!-- 列表 -->
<!--      @click="jump('/pages-landlord/contract/contractSigningNew?id='+item.contract_id)"-->
			<view class="record" v-for="item in list" :key="index"
				>
				<view class="flex">
					<view class="flex-left">
						<view class="t1">
							{{item.room_name}}
						</view>
						<view class="t2">
							{{item.build_address}}
						</view>
					</view>
					<view class="flex-right">
						<view class="t1">
							{{item.expire_date}}
						</view>
						<view class="t2">
							{{item.remark}}
						</view>
						<view class="t3 font-color-red">
							{{item.money}}元
						</view>
					</view>
				</view>
			</view>
			<view slot="bottom">
				<view class="safe-bottom action-bar">
					<view class="action-item" @click="handleAll">{{buildingName}}</view>
					<view class="action-item" @click="handleDate">{{dateName}}</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		deposit_stat
	} from '@/api/landlord.js'
	export default {
		data() {
			return {
				list: [],
				sortConfig: {
					sort: '', //排序，房号：room_name，账期：day，金额：money
					way: '' // 'asc' | 'desc' | ''
				},
				formData: {
					kw: '',
					build_id: '',
					day: '',
				},
				total_sum_money: 0,
				total: 0,
				buildingName: '全部大楼',
				dateName: "到期日"
			};
		},
		onShow() {
			uni.$on('selectBuilding', (building) => {
				this.formData.build_id = building.id; // 设置选中的大楼ID
				this.buildingName = building.address
				this.refreshList(); // 刷新列表
			});
		},
		onUnload() {
			uni.$off('selectBuilding'); // 清除事件监听
		},
		methods: {
			handleSort(sort) {
				if (this.sortConfig.sort === sort) {
					this.sortConfig.way = this.sortConfig.way === 'asc' ? 'desc' : 'asc';
				} else {
					this.sortConfig.sort = sort;
					this.sortConfig.way = 'asc';
				}
				this.refreshList()
			},
			handleDate() {
				let itemList = ['所有', '3天内', '7天内', '10天内', '15天内', '30天内']
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						if (res.tapIndex !== undefined) {
							if (res.tapIndex === 0) {
								this.formData.day = ''
							}
							if (res.tapIndex === 1) {
								this.formData.day = '3'
							}
							if (res.tapIndex === 2) {
								this.formData.day = '7'
							}
							if (res.tapIndex === 3) {
								this.formData.day = '10'
							}
							if (res.tapIndex === 4) {
								this.formData.day = '15'
							}
							if (res.tapIndex === 5) {
								this.formData.day = '30'
							}
							this.dateName = itemList[res.tapIndex]
							this.refreshList()
						}
					},
				})
			},
			handleAll() {
				this.$Tips('/pages-landlord/select-building/select-building')
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				deposit_stat({
					...this.formData,
					...this.sortConfig,
					page: pageNo,
					page_size: pageSize
				}).then(res => {
					this.total = res.data.data.total
					this.total_sum_money = res.data.data.total_sum_money
					this.$refs.paging.complete(res.data.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			// 路由跳转
			jump(item) {
				uni.navigateTo({
					url: item
				});
			}
		},
		onReady() {
			// 微信小程序需要用此写法
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
	}

	.font-color-red {
		color: #FF5900 !important;
	}

	.font-color-green {
		color: #2FAA4E;
	}

	.search-box {
		padding: 24rpx 32rpx;

		:deep(.u-search) {
			background-color: #ffffff !important;
			border-radius: 36rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

			.u-search__content {
				background-color: #ffffff !important;
				height: 72rpx;
				padding: 0 30rpx;

				.u-search__content__icon {
					margin-right: 8rpx;
				}

				.u-search__content__input {
					font-size: 28rpx;
				}
			}
		}
	}

	.sort-box {
		padding: 0 40rpx 32rpx 32rpx;
		display: flex;
		gap: 26rpx;
		background-color: #fff;

		.add-btn {
			padding: 20rpx;
		}

		.sort-item {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx 24rpx;
			background: #F5F6FA;
			border-radius: 12rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #202020;
			line-height: 36rpx;

			text {
				font-weight: 500;
				font-size: 26rpx;
				color: #202020;
			}
			
			image {
				width: 12rpx;
				height: 24rpx;
			}
		}
	}

	.title-bar {
		font-size: 24rpx;
	}

	.title-bar {
		padding: 0 30rpx 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			color: #999999;
		}
	}

	.record {
		// width: 100%;
		box-sizing: border-box;
		padding: 32rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 26rpx;
		margin: 26rpx 32rpx;

		.flex {
			display: flex;
			// align-items: center;
			justify-content: space-between;

			.flex-left {
				.t0 {}

				.t1 {}

				.t2 {}

				.t3 {}

				.t4 {
					margin-left: 10rpx;
				}
			}

			.flex-right {
				text-align: right;

				.r0 {}

				.r1 {}

				.r2 {}
			}

		}
	}

	.action-bar {
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		line-height: 80rpx;
		background-color: #FFFFFF;

		.action-item {
			font-weight: 600;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			text-align: center;
		}
	}
</style>